//左边小图标的显示与隐藏
		$("#left .li2").on("mouseenter",function(){		
			$(".nav2").css({width:74,height:"100%",opacity:1})								
		})
		$("#left .li2").on("mouseleave",function(){		
			$(".nav2").css({width:0,height:0,opacity:0})								
		})
	//右边小图标的显示与隐藏
		$("#right").find(".li2").find("a").on("mouseenter",function(){
			$(this).siblings(".nav2").css({"left":"-230px",opacity:1,display:"block"})
		})
		 $("#right").find(".li2").find("a").on("mouseleave",function(){
			$(this).siblings(".nav2").css({"left":"-300px",opacity:0,display:"none"})
		})
//给滚动条加动画
	$(document).scroll(function(){		
		if($(this).scrollTop()>50){
			$(".scroll").slideDown("1s");
			$(".scroll").on("click",function(){
				$(document).scrollTop(0);
			})
		}else{
			$(".scroll").slideUp("1s");
		}
	})

//搜索框（百度一下）
//拼接参数
	function params(obj){
		var str="";
		for(var key in obj){
			str+=key+"="+obj[key]+"&";
		}
		return str;
	}
	//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=miqi&cb=fn
	function jsonp(url,data,callback,fn){//注意传参时，每一项都要写，
		//1.生成随机函数名
		var tempName="jq"+parseInt(Math.random()*1000);//随机函数名
		window[tempName]=fn;

		//2.拼接字符串
		var tempParam=params(data);
		
		//3.拼接参数
		var tempUrl="";
		if(tempParam.length>0){
			tempUrl=url+"?"+tempParam+callback+"="+tempName;
		}
		else{
			tempUrl=url+"?"+callback+"="+tempName;
		}
		
		//4.创建script
		var oScript=document.createElement("script");
	    oScript.setAttribute("src", tempUrl);
	    document.body.appendChild(oScript);
	   //5数据出来后讲script以及src去除掉
	    oScript.onload = function () {
	        this.remove();
	       delete(window.fn)
	    }		
	}
	$("#search").find("#btn").on("click",function(){
			//注意传参时，每一项都要写，
		jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{"wd":""+$("#search").find("#text").val()+""},"cb",function(obj){					
			 for(var i=0;i<obj.s.length;i++){
			 	var ul=$("#search").find("ul").append("<li>"+obj.s[i]+"</li>");				 	
			 }
			 ul.children().on("click",function(){
			 	$("#search").find("#text").val($(this).html());
			 	$(this).parent().children().remove();
			 })
		});
	})	
	
//放大镜	
	//得到内联样式函数
	function getStyle(obj,attr){
		if(window.getComputedStyle){
			return parseInt(window.getComputedStyle(obj,null)[attr]);
		}
		return parseInt(obj.currentStyle[attr]);
	}
	
	window.onload=function(){
		var middleImg=document.getElementById("middleImg");//小图片
		var bigImg=document.getElementById("bigImg");//大图片
		var middleArea=document.getElementById("middleArea");//小区域
		var bigArea=document.getElementById("bigArea");//大区域
		var oBox=document.getElementById("box");//大区域		
		var small=document.getElementById("small");//下面的小图标
		
		//1.改变小区域的大小，来得到相等比例
		middleArea.style.width=getStyle(middleImg,"width")/getStyle(bigImg,"width")*getStyle(bigArea,"width")+"px";
		middleArea.style.height=getStyle(middleImg,"height")/getStyle(bigImg,"height")*getStyle(bigArea,"height")+"px";
	
		//2.获取比例
		var bili=getStyle(bigImg,"height")/getStyle(middleImg,"height");
//		console.log(bili);//2.2857142857142856
		
		//3.鼠标进入
		middleImg.onmousemove=function(evt){
			var e=evt||window.event;						
			middleArea.style.display="block"; //小区域，大区域，大图片，出现
			bigArea.style.display="block";
			bigImg.style.display="block";
			//大区域跟随鼠标移动
		var x=e.clientX-oBox.offsetLeft-middleImg.offsetLeft-middleArea.offsetWidth/2; 		
		var y=e.clientY-oBox.offsetTop-middleImg.offsetTop-middleArea.offsetHeight/2;
		//使鼠标一致位于小区域的最中间
//			console.log(x);
		
			middleArea.style.left=x+"px";
			middleArea.style.top=y+"px";
			//控制小区域的移动范围
			if(x<0){
				middleArea.style.left=0;
			}
			if(x>middleImg.offsetWidth-middleArea.offsetWidth){
				middleArea.style.left=middleImg.offsetWidth-middleArea.offsetWidth+"px";
			}
			if(y<0){
				middleArea.style.top=0;
			}
			if(y>middleImg.offsetHeight-middleArea.offsetHeight){
				middleArea.style.top=middleImg.offsetHeight-middleArea.offsetHeight+"px";
			}
			//大图片跟小区域运动方向相反
			bigImg.style.left=-x*bili+"px";
			bigImg.style.top=-y*bili+"px";
									
		}
		middleImg.onmouseleave=function(){
			middleArea.style.display="";  //小区域，大区域，大图片，隐藏
			bigArea.style.display="";
			bigImg.style.display="";
		}
		
		//点击下面的小图标改变大图的图片
		var lis=small.children[0].children;
			lis[0].onclick=function(){
				$.ajax({
					url:"../json/shop.json",
					async:true,
					type:"get",
					success:function(res){
						$(middleImg.children[0]).attr("src",res[id-1].FDJ[0]);
						$(bigImg).attr("src",res[id-1].FDJ[0]);;
					}
				});								
			}
			lis[1].onclick=function(){			
				$.ajax({
					url:"../json/shop.json",
					async:true,
					type:"get",
					success:function(res){
						$(middleImg.children[0]).attr("src",res[id-1].FDJ[1]);
						$(bigImg).attr("src",res[id-1].FDJ[1]);
					}
				});
			}		
								
	}
	
	
	$(function(){
		
		var a=$("#logo").find("a");
		for(var i=0;i<a.length;i++){
			a[i].index=i;
			$(a[i]).on("mouseenter",function(){				
				this.style.backgroundPosition="-"+(31*this.index)+"px -25px";
			})
			$(a[i]).on("mouseleave",function(){
				this.style.backgroundPosition="-"+(31*this.index)+"px 0";
			})
		}
		
		var id=window.location.search.split("?")[1].split("=")[1]-1;
		
		ajax({
			url:"../json/shop.json",
			async:true,
			type:"get",
			success:function(res){
				console.log(res[id])
//左边的小json列表
				for(var i=0;i<8;i++){
					$("#bd").append("<img src='"+res[id].bigimg[i]+"' />");
				}
				
//右边的小json列表
				for(var i=0;i<10;i++){
					$("#content").find(".right").append("<div class='box-list'><div class='list'><img src='"+res[id].src[i]+"'></div><p>"+res[id].pp[i]+"</p><span>"+res[id].money[i]+"</span></div>");																																	
				}
				
				//放大镜
				$(".small").attr("src",res[id].FDJ[0]);
				$(".lia").attr("src",res[id].FDJ[1]);
				$(".lib").attr("src",res[id].FDJ[2]);
				
				//描述
				$(".right").find("h1").html(res[id].h1);
				$(".right").find(".fl").html("品牌："+res[id].pingpai);
				$(".right").find(".fr").html("商品编号："+res[id].biaohao);
				$(".right").find(".price").html(res[id].price);
				
			}						
		})
		
//用于TAB栏跳转
		var $lis=$("#content").find(".top").find("li");		
		$lis.eq(0).on("mouseenter",function(){			
			$("#bd").show();
			$("table").show();
			$(".wenda").show();
			$(".pinjia").show();
		})
		$lis.eq(1).on("mouseenter",function(){			
			$("#bd").hide();
			$("table").hide();
			$(".wenda").hide();
			$(".pinjia").show();
		})
		$lis.eq(2).on("mouseenter",function(){			
			$("#bd").hide();
			$("table").hide();
			$(".pinjia").hide();
			$(".wenda").show();
		})
		
//用于提交提问
		$(".comment-btn").on("click",function(){			
			if($("textarea").val().length>=5&&$("textarea").val().length<=2000){
				$(".b2").find("ul").append("<li><div class='question clearfix'><em>me：</em><p>"+$("textarea").val()+"</p></div></li>");
				$("textarea").val("");
			}
			else{
				alert("字数限制为5-200个。")
			}
		})
	})
		
	
	